<template>
	<view style="width: 100%; height: 100%;">
		<view class="tabs" :class="tabs.fixed && 'fixed'">
			<slot name="tabs_left"></slot>
			<view class="tab-items">
				<view v-for="(tab, index) in tabs.data" class="tab-item" :class="current == index && 'active'" @click="current = index">{{ tab.title }}</view>
			</view>
			<slot name="tabs_right"></slot>
		</view>
		<view class="ad" :style="{margin:tabs.fixed ? '85rpx 0 0' : '0'}"><slot name="ad"></slot></view>

		<!-- <slot name="content" :index="current"></slot> -->
		<!-- <swiper :current="current" class="swiper-box" @change="onChange">
			<swiper-item v-for="(item, index) in tabs" :key="index">
				<scroll-view scroll-y="true" style="height: 100%;" @scrolltolower="scrolltolower">-->
		<!-- #ifdef MP -->
		<!-- <slot name="{{'content_' + index}}"></slot> -->
		<!-- #endif -->
		<!-- #ifndef MP -->
		<!-- <slot :name="'content_' + index"></slot> -->
		<!-- #endif -->
		<!-- </scroll-view>
			</swiper-item>
		</swiper> -->
	</view>
</template>

<script>
export default {
	name: 'customTabs',
	props: {
		currentTab: {
			type: Number,
			default: 0
		},
		tabs: {
			type: Object,
			default(){
				return {}
			}
		}
	},
	data() {
		return {
			current: this.currentTab
		};
	},
	created() {
		console.log(this.$props.tabs)
	},
	watch: {
		current(v) {
			this.$parent.$emit('onTabChange', v);
			uni.pageScrollTo({
				scrollTop: 0
			});
		}
	},
	methods: {
		onChange(e) {
			this.current = e.detail.current;
			this.$parent.$emit('onTabChange', e.detail.current);
		},
		scrolltolower(e) {
			this.$emit('onReachBottom', this.current);
			console.log(this.current);
		}
	}
};
</script>
<style>
swiper-tab {
	display: block;
	height: 100%;
}
</style>
<style lang="less" scoped>
.tabs {
	width: 710rpx;
	height: 75rpx;
	display: flex;
	justify-content: center;
	padding: 0 20rpx;
	&.fixed {
		position: fixed;
		background-color: #ffffff;
		top: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		box-shadow: 0 4rpx 24rpx 0 rgba(0, 0, 0, 0.1);
	}
	.tab-items {
		min-width: 500rpx;
		display: flex;
		justify-content: center;
		flex: 1;
		.tab-item {
			text-align: center;
			color: #333333;
			line-height: 73rpx;
			font-size: 28rpx;
			font-weight: 500;
			height: 100%;
			padding: 0 30rpx;
			box-sizing: border-box;
			&.active {
				color: #4cd964;
				border-bottom: 2rpx solid #4cd964;
			}
		}
	}
}
.ad {
}
.swiper-box {
	width: 100%;
	overflow: auto;
}
</style>
